<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style type="text/css">
			.mui-bar {
				background: rgba(0, 0, 0, .2);
				z-index: 100;
				
			}
		</style>
	</head>
	<body class="bg_index" >
			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item1 mui-active" href="index.html">
					<span class="mui-icon"><img src="images/tab_index01.png"/></span>
					<span class="mui-tab-label">拍拍拍</span>
				</a>
				<a class="mui-tab-item1" href="indexRelease.html">
					<span class="mui-icon "><img src="images/tab_index02.png"/></span>
					<span class="mui-tab-label">发布</span>
				</a>
				<a class="mui-tab-item1" href="msg.html">
					<span class="mui-icon"><img src="images/tab_index03.png"/></span>
					<span class="mui-tab-label">消息</span>
				</a>
				<a class="mui-tab-item1" href="my.html">
					<span class="mui-icon"><img src="images/tab_index04.png"/></span>
					<span class="mui-tab-label">我的</span>
				</a>
			</nav>
			<div class="index_nav text-center">
				<a href="javascript:void(0);" class="active">推荐</a>
				<a href="javascript:void(0);">关注</a>
			</div>
			<!--推荐-->
			<div class="index_div active " id="index">
				<div class="clearfix">
					<div class="left width70 relative text_main">
						<div class="text_info absolute">
							<p>{{detail.content}}</p>

						</div>
					</div>
					<ul class="right index_right">
						<li class="mg_top20">
							<a href="my.html" class="cp">
								<audio id="audio" autoplay="autoplay" poster='images/bg1.png'>
									<!-- <source src="" type="audio/mp3"></source>  -->
									<!--<source src="video/fcml.wav" type="audio/vnd.wave"></source>-->
								</audio>
							</a>
						</li>
						<li class="mg_top40">
							<a href="javascript:void(0);" ><img class="head_index" onclick="userData()" workId='' src="images/index_head.png" /></a>
							<p>关注</p>
						</li>
						<li >
							<a href="javascript:void(0);" onclick="praiseWork()"><img class="zan" src="images/index_gz.png" /></a>
							<p class="praiseNum">0</p>
						</li>
						<li class="pl_btn">
							<a href="javascript:void(0);"><img src="images/index_pl.png" /></a>
							<p class="commentNum">0</p>
						</li>
						<li class="share_btn">
							<a href="javascript:void(0);"><img src="images/index_share.png" /></a>
							<p class="shareNum">0</p>
						</li>
						<li>
							<a href="javascript:void(0);"><img src="images/index_xz.png" /></a>
							<p class="downloadNum">0</p>
						</li>
					</ul>
				</div>

			</div>
			<!--关注-->
			<div class="index_div">
				<div class="my_listitem">
					
					<!--<dl class="list_item">
						<a href="detial.html" class="width100">
							<dt class="relative">
		    				<img src="images/bg1.png"/>
		    				<p class="absolute list_text mui-ellipsis">文字内容文字内容文字...</p>
		    			</dt>
							<dd class="mg_tb10">
								<img src="images/headimg.png" /> 昵称1
							</dd>
						</a>
					</dl>-->

				</div>
			</div>
			<!--分享-->
			<ul class="bottom shore">
				<li>
					<img src="images/qq.png" alt="" />
					<p>QQ</p>
				</li>
				<li>
					<img src="images/pay_wx.png" alt="" />
					<p>微信好友</p>
				</li>
				<li>
					<img src="images/pyq.png" alt="" />
					<p>朋友圈</p>
				</li>
			</ul>
			<div class="overlay"></div>
			<!--评论-->
			<div class="index_pl padding_lr12">
				<p class="text_right padding_10"><img class="close" width="15" src="images/close_small.png" /></p>
				<div class="index_pllist">
					<!--<dl class="index_plitem mg_b10">
					<dt><img src="images/index_head.png"/></dt>
					<dd>
						<p class="color_25 bold">用户昵称</p>
						<h6 class="color_8 mg_tb10">15分钟前</h6>
						<p class="color_25 mg_top5">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内。</p>
						<p class="mg_top15">
							<img width="20"  class="vertical-align_m" src="images/heart.png" alt="" />
							1.5w
						</p>
					</dd>
				</dl>-->

				</div>
				<div class="index_plinput">
					<input type="text" name="" id="" value="" />
					<a href="javascript:void(0);" onclick="commentWork()">评论</a>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.js"></script>
	<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
//		
		mui.init()
		
		$(function() {
		
			
			document.addEventListener('DOMContentLoaded', function() {
				function audioAutoPlay() {
					var audio = document.getElementById('audio');
					audio.play();
					document.addEventListener("WeixinJSBridgeReady", function() {
						audio.play();
					}, false);
				}
				audioAutoPlay();
			});

			$('.index_nav a').click(function() {
				var index = $(this).index()
				$(this).addClass('active').siblings().removeClass('active')
				$('.index_div').eq(index).addClass('active').siblings().removeClass('active')
				if(index == 1) {
					$('.bg_index').addClass('bg_ff')
					$(this).parent().addClass('block')
					getFocusWork(1)
				} else {
					$('.bg_index').removeClass('bg_ff')
					$(this).parent().removeClass('block')
				}
			})
			//分享
			$(".share_btn").click(function() {
				$('.shore').fadeIn(200)
				$('.overlay').show()
			})
			$('.overlay').click(function() {
				$(this).hide()
				$('.shore').fadeOut(200)
			})
			//			评论
			$(".pl_btn").click(function() {

				$('.index_pl').fadeIn(200)
				$('.overlay').show()
				getCommentList(1)
			})
			$('.overlay').click(function() {
				$(this).hide()
				$('.index_pl').fadeOut(200)
			})
			$('.close').click(function() {
				$('.overlay').hide()
				$('.index_pl').fadeOut(200)
			})
		})
		//首页推荐
		function recommend(type,pager) {
			$('.gif').show()
			$.ajax({
				type: "post",
				url: urlcom + "work/recommend",
				async: true,
				dataType: 'json',
				data: {
					userId: localStorage.getItem('userId'),
					current: pager,
					type: type
				},
				success: function(res) {
					$('.gif').hide()
					 pager++;
					if(res.code == 0) {
						workId = res.data.workId
						$('.head_index').attr('src', res.data.userHeadImg)
						$('.text_info p').html(res.data.content)
						$('.praiseNum').html(res.data.praiseNum)
						$('.commentNum').html(res.data.commentNum)
						$('.shareNum').html(res.data.shareNum)
						$('.downloadNum').html(res.data.downloadNum)
						$('.bg_index').css({'background':'url(' + res.data.coverImg + ')no-repeat','background-size':'cover'})
						$('.head_index').attr('workId', res.data.workId)
						$('#audio').attr('src', res.data.bgm)
						if(res.data.isPraise==1){
							$('.zan').attr('src', 'images/heart.png')
						}
//							if(data.result.length > 0) {			    
//							     mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);//禁止刷新
//							} else {
//								layer.msg("已经到底了");					 
//							    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);//启动刷新
//							}
					}

				}
			});
		}recommend(1,0)

		function userData() {
			var id = $('.head_index').attr('workId')
			console.log(id)
			window.location.href = 'userData.html?id=' + id
//			window.location.href = 'my.html?id'
		}

		//点赞
		function praiseWork() {
			$('.gif').show()
			console.log($('.head_index').attr('workid'))
			$.ajax({
				type: "post",
				url: urlcom + "work/praiseWork",
				async: true,
				dataType: 'json',
				data: {
					userId: localStorage.getItem('userId'),
					workId: $('.head_index').attr('workid')
				},
				success: function(res) {
					$('.gif').hide()
					if(res.code == 0) {
						$('.zan').attr('src', 'images/heart.png')
						msg('点赞成功')
					} else {
						msg(res.msg)
					}

				}
			});
		}
		//获取评论列表
		function getCommentList(current) {
			$('.gif').show()
			$.ajax({
				type: "post",
				url: urlcom + "work/getCommentList",
				async: true,
				dataType: 'json',
				data: {
					userId: localStorage.getItem('userId'),
					workId: $('.head_index').attr('workid'),
					current: current,
					size: 10
				},
				success: function(res) {
					$('.gif').hide()
					if(res.code == 0) {
						if(res.data.length) {
							var html = '';
							$.each(res.data, function(k, v) {
								html += '<dl class="index_plitem mg_b10">' +
									'<dt><img src="' + v.userHeadimg + '"/></dt>' +
									'<dd>' +
									'<p class="color_25 bold">' + v.userName + '</p>' +
									'<h6 class="color_8 mg_tb10">15分钟前</h6>' +
									'<p class="color_25 mg_top5">' + v.content + '</p>' +
									'<p class="mg_top15"><img width="20"  class="vertical-align_m mg_r10" src="images/heart.png" alt="" />' + v.praiseNum + '</p>' +
									'</dd>' +
									'</dl>'
							});
							$('.index_pllist').html(html)
						} else {
							$('.index_pllist').html('<p class="text-center">暂无评论</p>')
						}
					} else {
						msg(res.msg)
					}

				}
			});
		}
		//关注列表
		function getFocusWork(current) {
			$('.gif').show()
			$.ajax({
				type: "post",
				url: urlcom + "work/getFocusWork",
				//				headers:{'token_access':localStorage.getItem('token')},
				async: true,
				dataType: 'json',
				data: {
					userId: localStorage.getItem('userId'),
					current: current,
					size: 10
				},
				success: function(res) {
					$('.gif').hide()
					if(res.code==0){

				      if(res.data.length){
							console.log(11)
							$('.num').html(res.data.length)
							var html='';
							$.each(res.data, function(k,v) {
								html+='<dl class="list_item">'+
					    			'<a href="detial.html?id='+v.workId+'" class="width100">'+
						    			'<dt class="relative">'+
						    				'<img src="'+v.coverImg+'"/>'+
						    				'<p class="absolute list_text mui-ellipsis">'+v.content+'</p>'+
						    			'</dt>'+
						    			'<dd class="mg_tb10"><img src="images/headimg.png"/>'+v.userName+'</dd>'+
					    			'</a>'+
					    		'</dl>'
							});
							$('.my_listitem').html(html)
						}else{
							$('.my_listitem').html('<div class="text-center mg_top20">暂无数据</div>')
						}
					}
				}
			});
		}
		
          //评论
		function commentWork() {
			var content = $('.index_plinput input').val()
			if(content) {
				$.ajax({
					type: "post",
					url: urlcom + "work/commentWork",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						workId: $('.head_index').attr('workid'),
						content: content
					},
					success: function(res) {

						if(res.code == 0) {
							msg('评论成功')
							$('.index_plinput input').val('')
							getCommentList(1)
						} else {
							msg(res.msg)
						}

					}
				});
			} else {
				msg('请输入~~')
			}
		}

		//上拉加载
		
		pager =0;
		pager++
//		pullRefresh(pager); //启用上拉下拉 
		
		function pullRefresh() {
			mui("#index").pullRefresh({
				up: {
					contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没 有 更 多 数 据 了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						recommend(1,pager);
						 mui('#index').pullRefresh().endPullupToRefresh(false);
					}
				},
				down:{
//					height:50,//可选,默认50.触发下拉刷新拖动距离,
		             auto: false,//可选,默认false.首次加载自动下拉刷新一次
		             contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
		             callback :function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						recommend(2,pager);
						 mui('#index').pullRefresh().endPullupToRefresh(false);
						
					}
				}
				
			})
		}
	</script>
</html>